<template>
  <view class="fixed-icon-share">
    <button v-if="openType" class="fixed-icon fixed_paidouyin" :class="isHidden?'fixed-icon-hidden':''" type="default"
            open-type="share"
            data-channel="video">
      <image :src="iconUrl"></image>
    </button>
    <image class="fixed-icon fixed_complaint" :class="isHidden?'fixed-icon-hidden-complaint':''" v-if="!openType"
           :src="iconUrl" @tap="gotoUrl()"></image>
  </view>
</template>

<script>
export default {
  name: "sharebtn",
  data() {
    return {};
  },
  props: {
    isHidden: {
      type: Boolean,
      default: false
    },
    openType: {
      type: Boolean,
      default: false
    },
    skipUrl: {
      type: String,
      default: ''
    },
    iconUrl: {
      type: String,
      default: ''
    }
  },
  created() {

  },
  methods: {
    gotoUrl() {
      uni.navigateTo({
        url: this.skipUrl
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.fixed-icon {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
  background: none;
  border: 0;
  border-radius: 0;
  line-height: 1.5;
  z-index: 99999;
  width: 108rpx;
  height: 414rpx;
}

.fixed_paidouyin {
  bottom: 200rpx;
  right: -108rpx;
  animation: hidden .3s linear forwards;
  // transform: translateX(-116%);
  // transition: all .3s linear;
  &::after {
    border: 0;
    border-radius: 0;
  }

  image {
    width: 108rpx;
    height: 114rpx;
  }
}

.fixed_joinlecturer {
  bottom: 400rpx;
  right: -108rpx;
  animation: hidden .3s linear forwards;
  // transform: translateX(-116%);
  // transition: all .3s linear;

}

.fixed-icon-hidden {
  right: 22rpx;
  animation: showing .3s linear forwards;
  // transform: translateX(84%);
  // transition: all .3s linear;
}

.fixed_complaint {
  display: block;
  width: 120rpx;
  height: 120rpx;
  bottom: 900rpx;
  right: -120rpx;
  animation: hidden .3s linear forwards;
}

.fixed-icon-hidden-complaint {
  right: 44rpx;
  animation: showing .3s linear forwards;
  // transform: translateX(84%);
  // transition: all .3s linear;
}

@keyframes hidden {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-130rpx);
  }
}

@keyframes showing {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(116rpx);
  }
}
</style>
